<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>

       <v-flex md8>
          <v-layout row nowrap justify-start>
            <v-flex md3 xs8 class="mt-2 date-wrapper">
              <v-menu offset-y>
                <v-btn depressed slot="activator">
                  <v-icon>date_range</v-icon>
                  <span>选择起始日期</span>
                </v-btn>
                <v-date-picker
                  min="2017-05-14"
                  :max="currentDate"
                  :first-day-of-week="0"
                  locale="zh-cn"
                  v-model="queryForm.fromTime"
                ></v-date-picker>
              </v-menu>
              <span class="date-text">{{queryForm.fromTime}}</span>
            </v-flex>
            <v-flex md3 xs8 class="mt-2 date-wrapper">
              <!-- 按时间查询 -->
              <v-menu offset-y>
                <v-btn depressed slot="activator">
                  <v-icon>date_range</v-icon>
                  <span>选择结束日期</span>
                </v-btn>
                <v-date-picker
                  min="2017-05-14"
                  :max="currentDate"
                  :first-day-of-week="0"
                  locale="zh-cn"
                  v-model="queryForm.toTime"
                ></v-date-picker>
              </v-menu>
              <span class="date-text">{{queryForm.toTime}}</span>
            </v-flex>
            <v-flex md4 xs5 class="mx-2">
              <v-btn icon @click="refresh" class="mt-2">
                <v-icon color="red">backspace</v-icon>
              </v-btn>
              <v-btn @click="search" dark color="blue" class="mt-2">
                <v-icon>search</v-icon>
                <span class="pl-2 subheading">搜索</span>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-flex>
      <v-flex md12 class="chip-selector">
          <v-chip
            @click="chipClicked(item, 1)"
            v-for="item of chipItems"
            :key="item.name"
            outline
            :color="chipSelected === item.value ? 'teal':'grey'"
            text-color="black"
          >
            <v-avatar
              class="white--text subheading"
              :class="chipSelected === item.value ? 'teal':'grey'"
            >
              <v-icon v-if="chipSelected === item.value">check</v-icon>
            </v-avatar>
              
            <span class="title">{{item.name}}</span>
          </v-chip>
          <span class="title">人数：{{totalCount}}</span>
        </v-flex>

      <v-flex row md12 justify-center xs12 class="overflow-table">
        <div class="table-container pos-abs">
          <v-card class="custom-table-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="custom-table">
              <thead>
                <tr>
                  <th v-for="(item, i) of headers" :key="i">
                    <div>{{item.text}}</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr class="datatable__progress" v-if="showProgress">
                    <th :colspan="headers.length" class="column">
                      <div class="progress-linear" style="height: 5px;">
                        <div
                          class="progress-linear__background teal"
                          style="height: 5px; opacity: 0.3; width: 100%;"
                        ></div>
                        <div class="progress-linear__bar">
                          <div
                            class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                          >
                            <div class="progress-linear__bar__indeterminate long teal"></div>
                            <div class="progress-linear__bar__indeterminate short teal"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>
                <tr v-for="item of tableData" :key="item.id">
                  <td>{{item.lftid}}</td>
                  <td class="text-xs-center">
                      <v-avatar size="36">
                        <img :src="item.headUrl" alt>
                      </v-avatar>
                    </td>
                  <td>{{item.nickname}}</td>
                </tr>
                <!-- <tr>
                  <td colspan="1" class="title">已获得红包共计: {{extraTr.totalPrice}}</td>
                  <td colspan="1" class="title">已兑换: {{extraTr.cashPrice}}</td>
                  <td colspan="1" class="title">未兑换余额: {{extraTr.unCashPrice}}</td>
                </tr> -->
                <tr v-if="tableData.length === 0">
                  <td :colspan="headers.length" class>
                    <div  class="text-md-center">
                      <i
                        
                        aria-hidden="true"
                        class="icon yellow--text text--darken-3 material-icons"
                      >warning</i>
                      <span  class="subheading">暂无数据</span>
                    </div>
                  </td>
                </tr>
                <!-- <tr class="sum-row"></tr> -->
              </tbody>
            </table>
          </v-card>
          <div class="text-xs-center my-2">
            <v-pagination
              @input="pageChange"
              circle
              :length="pagination.pageCount"
              :total-visible="pagination.totalVisible"
              v-model="pagination.page"
            ></v-pagination>
          </div>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import { redeem } from "../../api/activity";
import { getTime } from "../../util";
export default {
  data: () => ({
    showProgress: false,
    limit: 10,
    offset: 0,
    isSearch: false,
    queryForm: {
      fromTime: '',
      toTime: ''
    },
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    // 实际发送查询条件
    nickname: "",
    tableData: [],
    headers: [
      { text: "玩家ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false }
    ],
    extraTr: {
      totalPrice: 0,
      cashPrice: 0,
      unCashPrice: 0
    },
    chipSelected: 1,
    chipItems: [
      {
        name: "今天",
        value: 1
      },
      {
        name: "昨天",
        value: 2
      },
      {
        name: "总计",
        value: 3
      }],
      currentDate: "",
      totalCount: 0
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.getPlayersInActivity();

  },
  methods: {
    getTime,
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.chipSelected = 1;
      this.pagination.page = 1;
      this.queryForm = {
        fromTime: "",
        toTime: "",
      }
      this.getPlayersInActivity();
    },
    getPlayersInActivity() {
      const qs = {
        limit: this.limit,
        offset: this.offset,
        type: this.chipSelected
      };
      this.showProgress = true;
      redeem.getPlayersInActivity.r(qs).then(({ data }) => {
        if (data.result === 0) {
          let $data = data.data;
          console.log($data)
          if ($data) {
            let rankData = $data.dataList;
            this.tableData = rankData;
            // this.extraTr.totalPrice = $data.totalPrice;
            // this.extraTr.cashPrice = $data.cashPrice;
            // this.extraTr.unCashPrice = $data.unCashPrice;
            this.totalCount = $data.totalCount
            this.pagination.pageCount = $data.totalCount
              ? Math.ceil($data.totalCount / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    searchPlayersInActivity(qs) {

      this.showProgress = true;
      redeem.getPlayersInActivity.r(qs).then(({ data }) => {
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            let rankData = $data.dataList;
            this.tableData = rankData;
            this.totalCount = $data.totalCount
            // this.extraTr.totalPrice = $data.totalPrice;
            this.pagination.pageCount = $data.totalCount
              ? Math.ceil($data.totalCount / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
        }
      ];
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getPlayersInActivity();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    search(fromPage, ) {
      let valid = 0;
      let form = {};
      _.forEach(this.queryForm, (item, key) => {
          item ? (form[key] = item) : valid++;
      });
        if (valid == 2) {
          return $Vue.$emit("toggleSnackbar", {
            text: "请至少选择一个查询条件"
          });
        }

        if (this.queryForm.fromTime && this.queryForm.toTime) {
          if (
            new Date(this.queryForm.fromTime).getTime() >
            new Date(this.queryForm.toTime).getTime()
          ) {
            return $Vue.$emit("toggleSnackbar", {
              text: "起始日期不能早于结束日期"
            });
          }
          form.toTime = new Date(
            this.queryForm.toTime + " 23:59:59"
          ).getTime();
          form.fromTime = new Date(
            this.queryForm.fromTime + " 00:00:00"
          ).getTime();
        } else if (this.queryForm.fromTime || this.queryForm.toTime) {
          return $Vue.$emit("toggleSnackbar", {
            text: "请选择完整起止日期"
          });
        }
   

      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      // form.type = this.chipSelected;
      form.limit = this.limit;
      form.offset = this.offset;
      this.chipSelected = 0;

      this.searchPlayersInActivity(form);
      this.isSearch = true;
    },
    chipClicked(item) {
      this.chipSelected = item.value;
      this.pagination.page = 1;
      this.offset = 0;
      this.getPlayersInActivity();
    }
  }
};
</script>
<style lang="less" scoped>
.date-wrapper {
  position: relative;
    display: flex;
  align-items: center;
  justify-content: space-around;
    top: -8px;
  .date-text {
    display: inline-block;
    width: 120px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: relative;
    top: 0;

    .date-clear {
      position: absolute;
      right: -20px;
      top: 4px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>